import React from 'react';
import { Form, Input, Button ,message} from 'antd';
import axios from "../../utils/request"
import "./style.scss"
import { useNavigate } from 'react-router-dom';

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
    required: '${label} 不能为空!',
    types: {
        email: '${label} 不是正确的邮箱!',
    },
};
/* eslint-enable no-template-curly-in-string */

const Index = () => {
    const navigate=useNavigate()
        const onFinish =async(values) => {
            console.log(values)
            const res=await axios.post('/login',values.user)
            const {code,mes,token}=res.data
            if(code===200){
                message.success(mes)
                localStorage.setItem('token',token)
                navigate('/home/list')
            }else{
                message.error(mes)
            }
        };
        return (
            <div className='loginWrap'>
                <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                    <Form.Item
                        name={['user', 'username']}
                        label="账号"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['user', 'password']}
                        label="密码"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['user', 'email']}
                        label="邮箱"
                        rules={[
                            {
                                type: 'email',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }

    export default Index;
